<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ChatGPT小助手</title>
<style>
	body {
		font-family: "Helvetica Neue", sans-serif;
		font-size: 16px;
		color: #333;
	}
	
	h1 {
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}
	
	form {
		margin-bottom: 20px;
		padding: 20px;
		background-color: #f5f5f5;
		border-radius: 10px;
	}
	
	form label {
		display: block;
		margin-bottom: 10px;
		font-weight: bold;
	}
	
	form input[type="submit"] {
		display: block;
		margin-top: 20px;
		padding: 10px 20px;
		background-color: #2196F3;
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	
	form textarea {
		display: block;
		margin-bottom: 20px;
		padding: 10px;
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 5px;
		resize: none;
	}
	
	#text-result {
		padding: 10px;
		background-color: #dbd8d8;
		border-radius: 10px;
		margin-bottom: 20px;
	}
	
	#img-result-div {
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}
	
	#img-result {
		padding: 10px;
		background-color: #dbd8d8;
		border-radius: 10px;
		margin-bottom: 20px;
	}
	
	.aa {
		position: fixed;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 14px;
		color: #999;
	}
</style>
</head>
<body class="stripe">
	<h1 style="color:red;">注意：仅用于AI技术研究学习，请遵守法律法规，勿用于非法用途！</h1>
	<h1 style="color:red;">openAI官方接口有点慢，请耐心等待结果</h1>
	<form id="text-form">
		<label for="comments">*【智能问答】请输入关键词，比如：帮我写一首100字的抒情诗</label>
		<textarea id="comments" name="comments"></textarea>
		<input type="submit" value="提交">
	</form>
	<div id="text-result">【智能问答结果区】</div>
	
	<form id="img-form">
		<label for="img-comments">*【智能图片】请输入关键词，比如：马鲨拉地</label>
		<textarea id="img-comments" name="comments"></textarea>
		<input type="submit" value="提交">
	</form>
	<div id="img-result">【智能图片结果区】</div>
	
	<div class="aa">备案信息：<a href="http://beian.miit.gov.cn">京ICP备18024992号-1</a></div>
	<script>
    // 获取元素
const textForm = document.getElementById('text-form');
const textResult = document.getElementById('text-result');
const textComments = document.getElementById('text-comments');
const imgForm = document.getElementById('img-form');
const imgResult = document.getElementById('img-result');
const imgComments = document.getElementById('img-comments');

// 处理函数
// 处理函数
const handleTextSubmit = (event) => {
  textResult.innerHTML ='';
  event.preventDefault(); // 阻止表单默认提交行为
  fetch('http://localhost:5000/showTextV2', {
    method: 'POST',
    body: new FormData(textForm),
  })
    .then(response => {
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      return new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close();
                return;
              }
              const chunk = decoder.decode(value, { stream: true });
              controller.enqueue(value);
              textResult.innerHTML += chunk;
              push();
            }).catch(error => {
              console.error(error);
              controller.error(error);
            });
          }
          push();
        }
      });
    })
    .then(stream => new Response(stream))
    .then(response => response.text())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      textResult.innerHTML = `出错了：${error}`;
    });
};

const handleImgSubmit = (event) => {
  event.preventDefault(); // 阻止表单默认提交行为
  fetch('http://localhost:5000/showImageV2', {
    method: 'POST',
    body: new FormData(imgForm),
  })
    .then(response => {
      const reader = response.body.getReader();
      return new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close();
                return;
              }
              controller.enqueue(value);
              push();
            }).catch(error => {
              console.error(error);
              controller.error(error);
            });
          }
          push();
        }
      });
    })
    .then(stream => new Response(stream))
    .then(response => response.text())
    .then(text => {
		console.log(text);
		imgResult.innerHTML = `<a href='${text}' target="_blank">点击预览图片</a>`;
    })
    .catch(error => {
      imgResult.innerHTML = `出错了：${error}`;
    });
};

// 绑定事件
textForm.addEventListener('submit', handleTextSubmit);
imgForm.addEventListener('submit', handleImgSubmit);

  </script>
</body>
</html>
